<template>
    <div class="page">
        <section class="body">
            <p class="login-page" @click="back" :canback="Boolean(1)">找回密码</p>
            <form class="tj-form">
                <div class="form-item">
                  <div class="form-item-box">
                    <img class="icon-mobile" src="../../assets/images/icon-mobile.png" />
                    <span class="mobile-before-code">+86</span>
                    <input type="number"  placeholder="请輸入手机号" v-model="formData.mobile"  oninput="if(value.length>11)value=value.slice(0,11)" />
                  </div>
                </div>

                <div class="form-item pwd-box">
                                    <div class="item-flex code">
                                        <input type="number" placeholder="请輸入验证码" v-model="formData.captcha" oninput="if(value.length>4)value=value.slice(0,4)">
                                        <button type="button" class="btn" :disabled="seconds>0" @click="getCode">{{seconds==0?"|&nbsp;&nbsp;&nbsp;点击获取":"已发送("+seconds+"s)"}}</button>
                                    </div>
                                </div>
                <div class="form-item pwd-box">
                    <input type="password" placeholder="密码8-12位（不能全是数字或字母）" v-model="formData.newpassword" @blur="IsIntegerAndEnglishCharacter($event)">
                    <span class="error" v-show="!rule.isPwd.validate"><i class="iconfont iconerror1">{{rule.isPwd.msg}}</i></span>
                </div>

                <div class="form-item pwd-box">
                    <input type="password" placeholder="确认密码8-12位（不能全是数字或字母）" v-model="password"  @blur="confirmL($event)">
                     <span class="error" v-show="!rule.conFirmL.validate"><i class="iconfont iconerror1">{{rule.conFirmL.msg}}</i></span>
                </div>
                <button type="button" class="btn-submit btn-download" @click="confirm">提交</button>
            </form>
        </section>
        <m-load ref="load"></m-load>
    </div>
</template>
<script>
import {Init,Base} from '@/server/server.js';
import {Util,Load} from '@/assets/commonjs/utils.js';
export default {
    components:{
    },
    data () {
        return {
            seconds:0,
            formData:{
                mobile:null,
                newpassword:null,
                captcha:null
            },
            password:null,
            rule:{
              isMobile:{
                validate:true,
                msg:'请輸入正确的手机号'
              },
              isPwd:{
                validate:true,
                msg:'密码应为8-12位字母+数字'
              },
              conFirmL:{
                validate:true,
                msg:'兩次輸入密码不一致！'
              },
            }
        }
    },
    methods:{
        /**
         * 手机验证码
         */
        getCode(){
            if(!this.formData.mobile){
                mui.toast('请輸入正确的手机号！');
                return ;
            }
            this.seconds = 60;
            let get =  setInterval(()=>{
                this.$nextTick(()=>{
                    this.seconds = this.seconds-1;
                    if(this.seconds<=0){
                        clearInterval(get);
                    }
                })
            },1000);
// return ;
            // 发送验证码
            Base.sendCode({mobile:this.formData.mobile}).then((res)=>{
                mui.toast(res.msg);
            })
        },
        /**
         * 提交修改
         */
        confirm(){
            let _This = this;
            let msg = Util.isValidate(_This.formData,_This.rule);
            if(msg){
              mui.toast(msg);
              return ;
            }
                Load.loadStart(this);
                Init.backpwd(_This.formData).then((res)=>{
                    mui.toast(res.msg);
                    if(res.code == 1){
                        setTimeout(() => {
                            Load.loadEnd(this);
                            this.$router.go(-1);
                        }, 1000);
                    }else {
                        setTimeout(() => {
                            Load.loadEnd(this);
                            return ;
                        }, 1000);
                    }
                })
        },
        confirmL(event){
          if(event.target.value !=this.formData.newpassword){
            this.rule.conFirmL.validate = false;
          }else {
            this.rule.conFirmL.validate = true;
          }
        },
        IsMobilePhoneNumber(event) {
          let regex = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;
          if (event.target.value.match(regex)) {
            this.rule.isMobile.validate = true;
          } else {
            this.rule.isMobile.validate = false;
          }
        },
        IsIntegerAndEnglishCharacter(input) {
          var regex = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
          if (event.target.value.match(regex)) {
            this.rule.isPwd.validate = true;
          } else {
            this.rule.isPwd.validate = false;
          }
        },
        isValidate(){
          if(!Util.formValidate(this.rule)|| !Util.filterData(this.formData)){
              return false;
            }else{
              return true;
            }
        },
        back() {
          window.history.back();
        }
    }
}
</script>

<style scoped lang="less">
@import '~link-less';

.login-page {
  margin: 150px 50px;
  color: #fff;
  font-size: 46px;
}
.icon-mobile {
  width: 31px;
  height: 38px;
  margin-left: 20px;
}
.mobile-before-code {
  font-size: 26px;
  color: #fff;
  margin-left: 15px;
  margin-right: 10px;
}
.form-item-box {
  display: flex;
  align-items: center;
}
.form-item-box input {
  background-color: unset;
  color: #fff;
  // height:30px;
  margin: 0;
  padding: 0 10px;
  border: none;
  border-bottom: solid 1px #eee;
  width: 79%;
}
input {
  border-radius: 0;
}
.form-item input::-webkit-input-placeholder {
  color: #dddddd;
}
.pwd-box {
  margin: 80px 25px 0 25px;
}
.pwd-box input {
  margin: 0;
  height: 70px;
  background-color: unset;
  border: none;
  border-bottom:1px solid #f0f0f0 ;
  color: #fff;
}
.img-code {
  margin-bottom: 20px!important;
}
.tj-form {
  padding: 30px;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .5)
}
.tj-form .form-item .error {
  top: 84px;
}
.tj-form .form-item .error i {
  font-size: 30px;
}
.tj-form .form-item .item-flex button {
  margin: 0;
}
.page {
  background: #fff url("../../assets/images/dl_BJ.jpg") no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.btn-submit {
  display: block;
  margin: 0 auto 4vw;
  width: 88%;
  height: 85px;
  border-radius: 40px;
}
.btn-download {
  background: -webkit-linear-gradient(red, blue);
  background: linear-gradient(to right, #46cc08, #0CC469);
  margin-top: 100px;
}
</style >
